<template>
  <a-modal
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    class="banner"
    @cancel="handleCancel"
    cancelText="关闭"
    footer
    style="color: rgb(138, 223, 252);"
    :closable="false"
  >
  <a-spin :spinning="confirmLoading" class="top">
      <a-form :form="form">
        <a-row class="topbannner" :style="topbannner">
          <a-col :span="1"></a-col>

          <a-col :span="3" class="tital">住院病区设置</a-col>
          <a-col :span="19"></a-col>
          <a-col :span="1" @click="big" v-if="showbig" style="color: #38c3c8;line-height: 42px;">
            <img src="../../../assets/images/fangda.png" style="width: 20px;" />
          </a-col>
          <a-col :span="1" @click="big" v-if="!showbig" style="color: #38c3c8;line-height: 42px;">
            <img src="../../../assets/images/suoxiao.png" style="width: 20px;" />
          </a-col>
        </a-row>
        <a-row class="everyrow" :style="lsstyle">
          <a-col :span="1"></a-col>
          <a-col :span="12">
           <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="病区序号">
          <a-input placeholder="请输入病区序号" v-decorator="['wardId', {rules:[{ required: true,message: '请输入病区序号'}]}]" />
        </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="病区代码">
          <a-input placeholder="请输入病区代码" v-decorator="['wardCode', {rules:[{ required: true,message: '请输入病区代码'}]}]" />
        </a-form-item>
          </a-col>
        </a-row>
        <a-row :style="lsstyle" class="everyrow">
          <a-col :span="1"></a-col>

          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="病区名称">
          <a-input placeholder="请输入病区名称" v-decorator="['wardName', {rules:[{ required: true,message: '请输入病区名称'}]}]" />
        </a-form-item>
          </a-col>
          <a-col :span="11">
             <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="病区床位数">
          <a-input placeholder="请输入病区床位数" v-decorator="['wardBeds', {rules:[{ required: true,message: '请输入病区床位数'}]}]" />
        </a-form-item>
          </a-col>
        </a-row>
        <a-row class="everyrow" :style="lsstyle">
          <a-col :span="1"></a-col>

          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="归口类型">
          <a-select placeholder="请输归口类型" v-decorator="['putUnder', {rules:[{ required: true,message: '请输归口类型'}]}]">
            <a-select-option
              v-for="letter in dataSourcetype1"
              :key="letter"
              :value="`${letter.num}`"
            >{{letter.name}}</a-select-option>
          </a-select>
        </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="拼音码">
          <a-input placeholder="请输入拼音码" v-decorator="['pinyinCode', {rules:[{ required: true,message: '请输入拼音码'}]}]" />
        </a-form-item>
          </a-col>
        </a-row>
        <a-row class="everyrow" :style="lsstyle">
          <a-col :span="1"></a-col>

          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="启停用">
          <a-select placeholder="请输启停用" v-decorator="['stopType', {rules:[{ required: true,message: '请输启停用'}]}]">
            <a-select-option
              v-for="letter in dataSourcetype2"
              :key="letter"
              :value="`${letter.num}`"
            >{{letter.name}}</a-select-option>
          </a-select>
        </a-form-item>
          </a-col>
          <a-col :span="11">
             <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="字典码">
          <a-input placeholder="请输入字典码" v-decorator="['dictionariesCode', {rules:[{ required: true,message: '请输入字典码'}]}]" />
        </a-form-item>
          </a-col>
        </a-row>
        
        <div class="btn-out">
          <a-row>
            <a-col :span="19"></a-col>
            <button class="btn" @click="handleOk">保存</button>
            <button class="btn btn1" @click="handleCancel">取消</button>
          </a-row>
        </div>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { httpAction } from "@/api/manage";
import pick from "lodash.pick";
import moment from "moment";

export default {
  name: "WardSettingModal",
  data() {
    return {
      title: "操作",
      visible: false,
      bodyinner: true,
      showbig: true,
      visible: false,
      topbannner: {},
      lsstyle: {},
      dataSourcetype2: [{ name: '启用', num: '1' }, { name: '停用', num: '2' }],
      dataSourcetype1: [{ name: '归口类型1', num: '1' }, { name: '归口类型2', num: '2' }, { name: '归口类型3', num: '3' }],
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: "/dicts/wardSetting/add",
        edit: "/dicts/wardSetting/edit"
      }
    };
  },
  created() {},
  methods: {
    big() {
      this.showbig = !this.showbig
      if (this.showbig) {
        document.querySelector('.btn-out').style.marginTop = '0px'
        document.querySelector('.banner').style.width = '800px'
        this.lsstyle = { 'margin-top': '-15px' }
      } else {
        document.querySelector('.banner').style.width = '100%'
        document.querySelector('.btn-out').style.width = '100%'
        document.querySelector('.btn-out').style.marginTop = '30px'
        // document.querySelector('.everyrow').style = '30px'
        this.lsstyle = { 'margin-top': '20px' }
        this.topbannner = { width: '100%', 'margin-bottom': '50px' }
      }
    },
    add() {
      this.edit({});
    },
    edit(record) {
      this.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(
            this.model,
            "wardId",
            "wardCode",
            "wardName",
            "wardBeds",
            "putUnder",
            "pinyinCode",
            "dictionariesCode",
            "stopType",
            "operator",
            "opeType"
          )
        );
        //时间格式化
        this.form.setFieldsValue({
          opeDate: this.model.opeDate ? moment(this.model.opeDate) : null
        });
      });
    },
    close() {
      this.$emit("close");
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        var lever = /^[a-zA-Z]+$/
        var lever1 = /^[0-9]+$/
        console.log(JSON.stringify(values));
        if (!lever.test(values.wardName)) {
          that.$message.warning('请正确填写拼音码')
          return
        }
        if (!lever1.test(values.wardId)) {
          that.$message.warning('请正确填写病区序号')
          return
        }
        if (!lever1.test(values.wardCode)) {
          that.$message.warning('请正确填写病区代码')
          return
        }
        if (!lever1.test(values.dictionariesCode)) {
          that.$message.warning('请正确填写字典码')
          return
        }
        if (!lever1.test(values.wardBeds)) {
          that.$message.warning('请正确填写病区床位数')
          return
        }
        if (!err) {
          that.confirmLoading = true;
          let httpurl = "";
          let method = "";
          if (!this.model.id) {
            httpurl += this.url.add;
            method = "post";
          } else {
            httpurl += this.url.edit;
            method = "put";
          }
          let formData = Object.assign(this.model, values);
          //时间格式化
          formData.opeDate = formData.opeDate
            ? formData.opeDate.format("YYYY-MM-DD HH:mm:ss")
            : null;
          httpAction(httpurl, formData, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit("ok");
              } else {
                that.$message.warning(res.message);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
              that.close();
            });
        }
      });
    },
    handleCancel() {
      this.close();
    }
  }
};
</script>

<style lang="less" scoped>
@import '~@assets/less/zkxhadd.less';
</style>